<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui" />
    <meta name="format-detection" content="telephone=no">
<title>{{$name_en}}</title>
<link rel="stylesheet" href="{{asset('/api/static/css/base.css')}}">
<script>
  (function (doc, win) {
    var docEl = doc.documentElement,
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
      recalc = function () {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        docEl.style.fontSize = 100 * (clientWidth / 1080) + 'px';
      };
    recalc(); 
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
  })(document, window);
</script>
<style>
html, body { width: 100%; height: 100%; padding: 0; margin: 0; }
body {
    background-color: #071724;
}
.hide {
    display: none;
}
.navBox {
    width: 100%;
    padding-bottom: .06rem;
}
.nav {
    padding: 0 0 0 1%;
    margin: 0; 
    width: 100%;
    background-color: #131E30;
}
.nav li {
    width: 11%;
    list-style: none;
    float: left;
    font-size: .2rem;
    text-align: center;
    line-height: 1rem;
    color: #758DA7;
    font-family: "Microsoft Yahei";
}
.nav li.active {
    color: #C2CDD8;
    position: relative;
}
.nav li.active span {
    display: block;
    width: 40%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 30%;
    border-bottom: 2px solid #C2CDD8;
}
.klineInfo {
    padding: .2rem 0 0 .4rem;
    background-color: #131E30;
    margin-bottom: .1rem;
}
.allData {
    width: 50%;
}
.allData h1 {
    color: #F17A64;
    font-size: .6rem;
    line-height: 1.1rem;
}
.allData p {
    color: #758DA7;
    line-height: .8rem;
}
.allData p span {
    padding-right: .25rem
}
.marketData {
    width: 45%;
}
.marketData p {
    float: left;
    width: 50%;
    color: #758DA7;
    padding-bottom: .4rem;
}
.marketData p strong {
    color: #fff;
    opacity: 0.8;
}
.todayData {
    padding: 0 .2rem;
}
.todayData p {
    float: left;
    width: 33%;
    padding: 0.2rem 0;
    line-height: 0.6rem;
    text-align: center;
    color: #758DA7;
}
#chart-panel {
    width: 100%;
    height: 12rem;
}
.showInfo {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .6);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
}
.showInfo .clearfix {
    width: 90%;
    padding: 0 .8rem .6rem;
    position: absolute;
    top: 20%;
    left: 5%;
    background-color: #fff;
    border-radius: .1rem; 
    /*display: none;*/
}
.showInfo h1 {
    width: 100%;
    font-size: .45rem;
    float: left;
    color: #333;
    line-height: 1.5rem;
    text-align: center;
}
.showInfo ul {
    width: 40%;
}
.showInfo ul li {
    font-size: .4rem;
    line-height: 1rem;
    zoom: 1;
}
.showInfo ul li:after {
    display: block;
    content: "";
    clear: both;
}
.showInfo ul li span, .showInfo ul li strong {
    display: block;
}
.showInfo ul li span {
    width: 40%;
    float: left;
    color: #999;
    text-align: left;
}
.showInfo ul li strong {
    width: 60%;
    float: right;
    color: #666;
    text-align: right;
}
.rise {
    color: #28CA69 !important;
}
.fall {
    color: #F17A64 !important;
}
</style>
</head>

<body>
<div class="klineInfo"></div>
<div class="hide showInfo"></div>
<div class="navBox">
    <input type="hidden" name="id" value="{{$id}}">
    <input type="hidden" name="time_type" value="{{$time_type}}">
    <ul class="nav clearfix">
        <!-- <li data-type="1" data-time="60"><span></span>1分钟</li> -->
        <li data-type="2" data-time="300"><span></span>5分钟</li>
        <li data-type="3" data-time="900"><span></span>15分钟</li>
        <li data-type="4" data-time="1800"><span></span>30分钟</li>
        <li data-type="5" data-time="3600"><span></span>1小时</li>
        <li data-type="6" data-time="14400"><span></span>4小时</li>
        <li data-type="0" data-time="86400" class="active"><span></span>1天</li>
        <li data-type="8" data-time="604800"><span></span>1周</li>
        <li data-type="9" data-time="2592000"><span></span>1月</li>
        <li class="last" onclick="window.location.href='/api/depth_line?id='+{{$id}}">深度</li>
    </ul>
</div>

<div id="chart-panel"></div>
<script src="{{asset('/api/static/js/jquery-1.10.2.min.js')}}"></script>
<script src="{{asset('/api/static/js/echarts.min.js')}}"></script>
<script src="{{asset('/api/static/js/base.js')}}"></script>
<script>
    var type = 0, time = 86400*1000, id=$('input[name=id]').val(), time_type = $('input[name=time_type]').val() || 0;
    var gg = true;
    $('.nav').find('li').not('.last').each(function(e, i) {
        type = $(this).data('type');
        if(type == time_type){
            $(this).addClass('active');
        }else{
            $(this).removeClass('active');
        }
        $(this).click(function() {
            if( !$(this).hasClass() ){
                gg = false;
                // $('.nav').find('li').removeClass('active');
                // $(this).addClass('active');
                type = $(this).data('type');
                time = $(this).data('time')*1000;
                time_type = $(this).data('type');
                echo_chart()
                if( gg ){
                    $('.nav').find('li').removeClass('active');
                    $(this).addClass('active');
                }
                window.ttp.changeTimeType(time_type)
            }
        })
    })
    $('.klineInfo').click(function(){
        if( $('.showInfo').hasClass('hide') ){
            $('.showInfo').removeClass('hide') 
        }
    });
    $('.showInfo').click(function(){
        $(this).addClass('hide') 
    });

    changeClassByType();
    index_kline_head();
    echo_chart();
//改变样式
function changeClassByType(){
    $('.nav').find('li').each(function(e, i) {
        type = $(this).data('type');
        if(type == time_type){
            $(this).addClass('active');
            time = $(this).data('time')*1000;
        }else{
            $(this).removeClass('active');
        }
    })
}
function echo_chart(){
    $.ajax({
        url: "/api/index_kline_data",
        type: 'POST',
        async: false,
        data: {'id': id,'time_type':time_type},
        dataType: 'JSON',
        success: function(repo){
            // console.log(repo)
            if( repo.status!=1 ){
                console.log('/api/index_kline_data 错')
                return false
            }
            var $data = repo.data.data;
            console.log($data)
            console.log(Date.parse(new Date()), time, $data)
            market_chart('chart-panel', $data);
            gg = true;
            // var timer = null;
            // clearInterval(timer);
            // timer = setInterval(function () {
            //     $.ajax({
            //         url: "/api/index_kline_data",
            //         type: 'POST',
            //         data: {'id': id,'time_type':time_type},
            //         dataType: 'JSON',
            //         success: function(repo){
            //             if( repo.status!=1 ){
            //                 console.log('/api/index_kline_data 错')
            //                 return false
            //             }
            //             // console.log(repo)
            //             var $data = repo.data.data;
            //             console.log(Date.parse(new Date()), time, $data)
            //             market_chart('chart-panel', $data);
            //         }
            //     })
            // }, time);
        }
    });
};

function index_kline_head(){
    $.ajax({
        url: "/api/index_kline_head",
        type: 'POST',
        data: {'id': id },
        dataType: 'JSON',
        success: function(repo){
            console.log(repo)
            var $data = repo.data;
            var html = '<div class="clearfix">\
                    <div class="fl allData">\
                        <h1>'+$data.lasted_price+'</h1>\
                        <p><span>'+$data.gains+'</span><span>'+$data.swing+'</span></p>\
                        <p>更新时间：'+$data.time+'</p>\
                    </div>\
                    <div class="fr marketData">\
                        <p>最高<br/><strong>'+$data.max_price+'</strong></p>\
                        <p>买一<br/><strong>'+$data.buy_price+'</strong></p>\
                        <p>最低<br/><strong>'+$data.min_price+'</strong></p>\
                        <p>卖一<br/><strong>'+$data.sale_price+'</strong></p>\
                    </div>\
                </div>\
                <div class="todayData clearfix">\
                    <p>开<strong>'+$data.open_price+'</strong></p>\
                    <p>收<strong>'+$data.lasted_price+'</strong></p>\
                    <p>量<strong>'+$data.num+'</strong></p>\
                </div>'
            var html2 = '<div class="clearfix">\
                    <h1>行情数据</h1>\
                    <ul class="fl">\
                        <li><span>最新</span><strong>'+$data.lasted_price+'</strong></li>\
                        <li><span>买一</span><strong>'+$data.buy_price+'</strong></li>\
                        <li><span>费率</span><strong>'+$data.buy_fee+'</strong></li>\
                        <li><span>卖一</span><strong>'+$data.sale_price+'</strong></li>\
                        <li><span>成交量</span><strong>'+$data.num+'</strong></li>\
                        <li><span>涨幅</span><strong>'+$data.gains+'</strong></li>\
                    </ul>\
                    <ul class="fr">\
                        <li><span>开盘</span><strong class="rise">'+$data.open_price+'</strong></li>\
                        <li><span>涨跌</span><strong class="fall">'+$data.swing+'</strong></li>\
                        <li><span>收盘</span><strong>'+$data.lasted_price+'</strong></li>\
                        <li><span>最高</span><strong>'+$data.max_price+'</strong></li>\
                        <li><span>最低</span><strong>'+$data.min_price+'</strong></li>\
                    </ul>\
                </div>'
            $('.klineInfo').html( html );
            $('.showInfo').html( html2 );

            // console.log(Date.parse(new Date()), time, $data)
            // market_chart('chart-panel', $data);
            var timer = null;
            clearInterval(timer);
            timer = setInterval(function () {
                $.ajax({
                    url: "/api/index_kline_head",
                    type: 'POST',
                    data: {'id': id },
                    dataType: 'JSON',
                    success: function(repo){
                        // console.log(repo)
                        var $data = repo.data;
                        var html = '<div class="clearfix">\
                                <div class="fl allData">\
                                    <h1>'+$data.lasted_price+'</h1>\
                                    <p><span>'+$data.gains+'</span><span>'+$data.swing+'</span></p>\
                                    <p>更新时间：'+$data.time+'</p>\
                                </div>\
                                <div class="fr marketData">\
                                    <p>最高<br/><strong>'+$data.max_price+'</strong></p>\
                                    <p>买一<br/><strong>'+$data.buy_price+'</strong></p>\
                                    <p>最低<br/><strong>'+$data.min_price+'</strong></p>\
                                    <p>卖一<br/><strong>'+$data.sale_price+'</strong></p>\
                                </div>\
                            </div>\
                            <div class="todayData clearfix">\
                                <p>开<strong>'+$data.open_price+'</strong></p>\
                                <p>收<strong>'+$data.lasted_price+'</strong></p>\
                                <p>量<strong>'+$data.num+'</strong></p>\
                            </div>'
                        var html2 = '<div class="clearfix">\
                                <h1>行情数据</h1>\
                                <ul class="fl">\
                                    <li><span>最新</span><strong>'+$data.lasted_price+'</strong></li>\
                                    <li><span>买一</span><strong>'+$data.buy_price+'</strong></li>\
                                    <li><span>费率</span><strong>'+$data.buy_fee+'</strong></li>\
                                    <li><span>卖一</span><strong>'+$data.sale_price+'</strong></li>\
                                    <li><span>成交量</span><strong>'+$data.num+'</strong></li>\
                                    <li><span>涨幅</span><strong>'+$data.gains+'</strong></li>\
                                </ul>\
                                <ul class="fr">\
                                    <li><span>开盘</span><strong class="rise">'+$data.open_price+'</strong></li>\
                                    <li><span>涨跌</span><strong class="fall">'+$data.swing+'</strong></li>\
                                    <li><span>收盘</span><strong>'+$data.lasted_price+'</strong></li>\
                                    <li><span>最高</span><strong>'+$data.max_price+'</strong></li>\
                                    <li><span>最低</span><strong>'+$data.min_price+'</strong></li>\
                                </ul>\
                            </div>'
                        $('.klineInfo').html( html );
                        $('.showInfo').html( html2 );
                    }
                })
            }, 10000);
        }
    });
}
</script>
</body>
</html>
